<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <link rel="stylesheet" href="./css/bui/bui.css">
    <link rel="stylesheet" href="./css/global/common.css">
    <link rel="stylesheet" href="./css/shop/shop.css">
</head>
<body id="shop">
<div id="app" class="bui-page">
    <div id="page_shop" class="page" style="background: rgba(17,17,17,1)">
        <div class="order-head">
            <div class="order-head-text">
                <div class="text">郑州文化艺术品交易所</div>
                <img src="./image/return.png" class="head-img-return" onclick="$cs.closeWin()"/>
            </div>
        </div>
        <div class="bui-scroll-main">
            <div class="shop-content-wrap">
                <div class="top-bg-wrap">
                    <div class="top-title-wrap flex-center">实名认证通过即赠送粉丝任务包</div>
                    <div class="flex-lr top-head-wrap">
                        <div class="flex-l">
                            <img class="head-img" :src="$cs.format_url(dataWrap.head_img)" alt="">
                            <div>
                                <div class="name" v-text="dataWrap.username"></div>
                                <div v-text="'用户ID：' + dataWrap.id"></div>
                            </div>
                        </div>
                        <div class="app-btn flex-center" @click="skipApp()">APP下载</div>
                    </div>
<!--                    <div class="flex-center top-tishi-wrap">-->
<!--                        <img src="./image/left_icon.png" alt="">-->
<!--                        <div>温馨提示</div>-->
<!--                        <img src="./image/right_cion.png" alt="">-->
<!--                    </div>-->
<!--                    <div class="flex-center top-tishi-wrap" style="margin-bottom: 0.45rem">-->
<!--                        <img src="./image/left_icon.png" alt="">-->
<!--                        <div>必须直推三个实名用户才可以开三卖权限</div>-->
<!--                        <img src="./image/right_cion.png" alt="">-->
<!--                    </div>-->
                    <div class="flex-center" style="text-align: center">
                        <img class="top-tishi-img" src="./image/xia_icon.png" alt="">
                    </div>
                </div>
                <div class="select-btn-wrap flex-center">
                    <div class="flex-center btn" :class="statusIs == 0 ? 'btn-active' : ''" @click="statusIs = 0;setCentre()">任务包兑换</div>
                    <div class="flex-center btn" :class="statusIs == 1 ? 'btn-active' : ''" @click="statusIs = 1;setCentre()">我的任务包</div>
                </div>
                <div class="list-content-wrap">
                    <!--                兑换任务包-->
                    <div class="list-item" v-show="statusIs == 0" @click="items=item;is_type=true" v-for="item in equsList">
                        <div class="list-item-next">
                            <div class="name" v-text="item.equip_name"></div>
                            <div class="flex-top">
                                <img class="gift-img" :src="$cs.format_url(item.equip_img)" alt="">
                                <div class="gift-content">
                                    <div class="text">任务包数量：</div>
                                    <div class="red" v-text="item.sum+'/'+item.limit_num"></div>
                                    <div class="text">每日分红：</div>
                                    <div class="huang" v-text="item.total_reward+'票'"></div>

                                </div>
                                <div class="gift-content">
                                    <div class="text">礼包价值：</div>
                                    <div class="huang" v-text="item.exchange_amount+'票'"></div>
                                </div>
                            </div>
                            <div class="bottom-list-xian flex-lr">
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                            </div>
                            <div class="bottom-list flex-lr">
                                <div v-text="'分红上限：' + item.total_reward + '票'"></div>
                                <div class="mins-btn flex-center">兑换</div>
                            </div>
                        </div>
                    </div>
                    <!--                我的任务包-->
                    <div class="list-item" v-show="statusIs == 1" v-for="item in equsList">
                        <div class="list-item-next">
                            <div class="name" v-text="item.equip_name"></div>
                            <div class="flex-top">
                                <img class="gift-img" :src="$cs.format_url(item.equip_img)" alt="">
                                <div class="gift-content">
                                    <div class="text">当前状态：</div>
                                    <div class="red" v-text="item.status ? '已结束' : '分红中'"></div>
                                    <div class="text">总分红：</div>
                                    <div class="huang" v-text="item.total_release+'票'"></div>

                                </div>
                                <div class="gift-content">
                                    <div class="text">剩余分红：</div>
                                    <div class="huang" v-text="Number(item.total_reward) - Number(item.total_release) + '票'"></div>
                                    <div class="text">分红上限：</div>
                                    <div class="huang" v-text="item.total_reward+'票'"></div>
                                </div>
                            </div>
                            <div class="bottom-list-xian flex-lr">
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                                <div class="xian"></div>
                            </div>
                            <div class="bottom-list flex-lr">
                                <div v-text="'任务编号：' + item.o_sn"></div>
                            </div>
                        </div>
                    </div>
                    <div class="none" v-show="equsList && equsList.length==0">
                        <p class="change_luange_in">暂无购买记录</p>
                    </div>
                </div>
            </div>
        </div>
<!--        弹窗 任务包兑换-->
        <div class="model-type" v-show="is_type">
            <div class="make-model-content">
                <div class="model-top flex-center">
                    <div>任务包兑换</div>
                    <img src="./image/close4.png" alt="" @click="is_type=false">
                </div>
                <div class="model-contents">
                    <div class="title-tishi">兑换花费</div>
                    <div class="tishi-price" v-text="items.exchange_amount + '票'"></div>
<!--                    <div class="title-tishi">交易密码</div>-->
<!--                    <div class="input-wrap">-->
<!--                        <input type="password" v-model="password" class="content-iup" placeholder="请输入交易密码">-->
<!--                    </div>-->
                </div>
                <div class="max-btn" style="width: 5.34rem;border-radius: 0.1rem" @click="sumbit()">确认兑换</div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./script/jquery.js"></script>
<script src="./script/bui.js"></script>
<script src="./script/vue.js"></script>
<script src="./script/common.js"></script>
<script src="./script/fastclick.js"></script>
<script src="./script/md5-min.js"></script>
<script src="./script/api/api.js"></script>
<script src="./script/swiper.min.js"></script>

<script type="text/javascript">
    init_bui();
    function init_bui() {
        var timeStamp = Math.round(new Date().getTime()/1000);
        var md = '7EDBAE46DB60629CE7A072B66F78571D';
        var sign = hex_md5(timeStamp + md).toUpperCase();
        var _vue = new Vue({
            el: '#app',
            data: {
                statusIs: 0, //0任务包兑换 1 我的任务包
                is_type: false,
                is_type1: false,
                equsList: [], //列表
                items: [],
                password: '',
                dataWrap: [], //用户信息
                userId: null,
            },
            created() {

            },
            mounted() {
                this.init();
                this.getUserDetails(); //获取用户信息
            },
            methods: {
                init(){
                    this.userId = window.location.href.split("=")[1];
                    console.log(this.userId + 'this.userId');
                    var _this = this;
                    bui.ready(function() {
                        _this.uiPullRefresh = bui.pullrefresh({
                            id: "#page_shop",
                            onBeforeRefresh : function () {
                                console.log("brefore")
                            },
                            onRefresh : _this.setCentre    //回调不能加（）
                        });
                    })
                },

                setCentre(){
                    if (this.statusIs) { //我的任务包
                        this.myEquList();
                    } else { //0任务包兑换
                        this.equListList();
                    }
                },

                getUserDetails(){
                    var _this = this;
                    $.ajax({
                        url:"/api/Webapi/getUserDetail",
                        data:{user_id:this.userId,sign:sign,t:timeStamp},
                        type:'post',
                        success:function(res){
                            res = JSON.parse(res);
                            if (res.success == true) {
                                if (res.data) {
                                    _this.dataWrap = res.data;
                                }
                            } else {
                                alert(res.message)
                            }
                        }
                    })
                },

                //任务包兑换
                equListList() {
                    var _this = this;
                    $.ajax({
                        url:"/api/Webapi/equList",
                        data:{user_id:this.userId,sign:sign,t:timeStamp},
                        type:'post',
                        success:function(res){
                            _this.uiPullRefresh.reverse(); //关闭下拉刷新
                            res = JSON.parse(res);
                            if (res.success == true) {
                                if (res.data) {
                                    _this.equsList = res.data;
                                }
                            } else {
                                alert(res.message)
                            }
                        }
                    })
                },

                //我的任务包
                myEquList() {
                    var _this = this;
                    $.ajax({
                        url:"/api/Webapi/myEquip",
                        data:{user_id:this.userId,sign:sign,t:timeStamp},
                        type:'post',
                        success:function(res){
                            _this.uiPullRefresh.reverse(); //关闭下拉刷新
                            res = JSON.parse(res);
                            if (res.success == true) {
                                if (res.data) {
                                    _this.equsList = res.data;
                                }
                            } else {
                                alert(res.message)
                            }
                        }
                    })
                },

                //确认兑换
                sumbit(){
                    var _this = this;
                    // if (!this.password) return alert('请输入支付密码');
                    this.is_type = false;
                    $.ajax({
                        url:"/api/Webapi/equBuy",
                        data:{e_id: this.items.id, pay_password: this.password,user_id: this.userId,sign:sign,t:timeStamp},
                        type:'post',
                        success:function(res){
                            _this.uiPullRefresh.reverse(); //关闭下拉刷新
                            res = JSON.parse(res);
                            if (res.success == true) {
                                window.location = res.data;
                            } else {
                                alert(res.message)
                            }
                        }
                    })
                },

                //跳转下载APP
                skipApp(){
                    window.location = this.dataWrap.download_url;
                },
            },
        })

    }
</script>
</html>
